<template>
	<view>
		<safe-area></safe-area>
		<!-- 轮播 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperData" :key="index">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 课堂信息 -->
		<view class="info">
			<view class="top">
				<image src="../../static/logo1.png" mode=""></image>
				<view class="right">
					<view class="title">咕泡教育</view>
					<view class="desc">让每个人的职业生涯不留遗憾</view>
				</view>
			</view>
			<view class="btm">
				<view class="item">好评度96%</view>
				<view class="item">课程数195</view>
				<view class="item">学生数76万</view>
			</view>
		</view>
		<uni-segmented-control :current="activeIndex" :values="items" style-type="text" active-color="#007aff"
			@clickItem="onClickItem" />
		<!-- tab 切换 -->
		<view v-if="activeIndex === 0">
			<view class="list-item" v-for="item in listData" :key="item.id" @click="toDetail(item)">
				<image :src="item.image" mode="" style="width: 100%;"></image>
				<view class="title">{{item.title}}</view>
				<view class="price">￥：{{item.price}}</view>
			</view>
		</view>
		<view v-if="activeIndex === 1">2</view>
		<view v-if="activeIndex === 2">3</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const activeIndex = ref(0)
	const items = ['推荐', '课程', '老师']
	// 轮播数据
	const swiperData = [
		"../../static/images/banner1.webp",
		"../../static/images/banner2.webp",
		"../../static/images/banner3.webp",
		"../../static/images/banner4.webp",
	]
	const listData = ref([])
	// tab 切换
	const onClickItem = (e) => {
		if (activeIndex.value !== e.currentIndex) {
			activeIndex.value = e.currentIndex
		}
	}
	// 列表数据
	const getList = () => {
		// 404 not found 资源未找到
		uni.request({
			url: 'http://localhost:3000/classList'
		}).then(resp => {
			console.log(resp.data)
			listData.value = resp.data
		})
	}
	// 进入详情
	const toDetail = (item) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${item.id}&title=${item.title}&price=${item.price}
			&image=${item.image}`
		})
	}
	
	getList()
</script>

<style lang="scss">
	.swiper {
		width: 100%;
		height: 400rpx;

		.swiper-item image {
			width: 100%;
			height: 400rpx;
		}
	}

	.info {
		padding: 20rpx;

		.top {
			display: flex;

			image {
				width: 200rpx;
				height: 200rpx;
				transform: translateY(-100rpx);
				margin-right: 20rpx;
			}

			height: 120rpx;
		}

		.btm {
			display: flex;
			justify-content: space-around;

			.item {
				width: 100%;
				border-right: 1px solid #ccc;
				text-align: center;

				&:last-child {
					border-right: 0;
				}
			}
		}
	}
</style>